<template>
  <div>
    <div class="children-list">
      <component :is="FamilyCoupleTreeNode" v-for="(child, idx) in children" :key="'node-' + idx" :node="child" />
    </div>
    <div v-if="hasAnyChildren" class="children-row">
      <div v-for="(child, idx) in children" :key="'row-' + idx">
        <div
          v-if="child && child.children && child.children.length"
          :class="['family-group', { 'root-family-group': $attrs.rootLevel }]"
        >
          <div class="vertical-line"></div>
          <FamilyChildrenRow :children="child.children" :rootLevel="false" />
        </div>
        <FamilyChildrenRow v-else-if="child && child.children" :children="child.children" :rootLevel="false" />
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, resolveComponent } from 'vue';
export default defineComponent({
  name: 'FamilyChildrenRow',
  props: {
    children: Array,
    rootLevel: {
      type: Boolean,
      default: true
    }
  },
  components: {
    FamilyChildrenRow: () => import('./FamilyChildrenRow.vue')
  },
  computed: {
    FamilyCoupleTreeNode() {
      return resolveComponent('FamilyCoupleTreeNode');
    },
    hasAnyChildren() {
      return this.children && this.children.some(child => child && child.children && child.children.length);
    }
  }
});
</script>
<style scoped>
.children-list {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
}
.child-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.children-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 16px;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  min-width: 0;
}
.family-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7fafd;
  border: 1.5px dashed #b3c6e0;
  border-radius: 12px;
  margin: 0 12px;
  padding: 12px 10px 0 10px;
  min-width: 160px;
  box-shadow: 0 2px 12px rgba(100,150,200,0.08);
}
.root-family-group {
  width: 95vw;
  max-width: 1800px;
  margin: 0 auto;
  min-width: 900px;
}
.vertical-line {
  width: 2px;
  height: 24px;
  background: #bbb;
  margin-bottom: 4px;
}
</style> 